<template>
	<view class="comment">
		<view class="comment-item">
			<view class="top">
				<image mode="widthFix" class="avatar"></image>
				<view class="user">
					<view class="username">用户1</view>
					<u-icon name="thumb-up" color="#333" size="18"></u-icon>
				</view>
			</view>
			<view class="bottom">
				<view class="comment-detail">
					<text>来，跟着口诀背就行了。政法经：这三科是公基黄金三科，分值占比较重，概念又抽象，所以务必多跟老师的实例去进行理解记忆。我跟的苏子锦的例题和框架，重难点和高频考点老师会直接列出来，跟着口诀背就行了。政法经：这三科是公基黄金三科，分值占比较重来，跟着口诀背就行了。政法经：这三科是公基黄金三科，分值占比较重</text>
					<text class="create-time">10.23评论</text>
				</view>
				<view class="comment-child">
					<view class="comment-item-child" v-for="i in 3" :key="i">
						<view class="top">
							<image mode="widthFix" class="avatar"></image>
							<view class="user">
								<view class="username">用户2</view>
								<u-icon name="thumb-up" color="#333" size="18"></u-icon>
							</view>
						</view>
						<view class="bottom">
							<view class="comment-detail">
								<text>政法经：这三科是公基黄金三科，分值占比较重，概念又抽象，所以务必多跟老师的实例去进行理解记忆。我跟的苏子锦的例题和框架，重难点和高频考点老师会直接列出来，跟着口诀背就行了。政法经：这三科是公基黄金三科，分值占比较重来，跟着口诀背就行了。政法经：这三科是公基黄金三科，分值占比较重</text>
								<text class="create-time">10.23评论</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
	.comment {
		margin: 0rpx 32rpx 24rpx;

		.comment-item,
		.comment-item-child {
			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.avatar {
					flex-shrink: 0;
					width: 65rpx;
					height: 65rpx;
					background: #E4EFFD;
					border-radius: 50%;
				}

				.user {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-left: 18rpx;

					.username {
						font-size: 28rpx;
						color: #999;
					}
				}
			}

			.bottom {
				margin-left: 80rpx;

				.comment-detail {
					font-size: 24rpx;
					font-weight: normal;
					line-height: 52rpx;
					letter-spacing: 0.08em;
					color: #333;

					.create-time {
						font-size: 20rpx;
						font-weight: normal;
						line-height: 52rpx;
						letter-spacing: 0.08em;
						color: #999999;
						margin-left: 12rpx;
					}
				}
			}
		}
	}

	.comment-child {
		border-radius: 20rpx;
		opacity: 1;
		background: #F9F8F7;
		padding: 20rpx;
		box-sizing: border-box;

		.comment-item-child {
			.avatar {
				width: 51rpx !important;
				height: 51rpx !important;
			}

			.user {
				.username {
					font-size: 26rpx !important;
				}
			}

			.bottom {
				margin-left: 70rpx;
			}
		}


	}
</style>